<template>
  <div class="tabBar" v-show="showTabBar">
    <TabBarItem v-for="(item,index) in tabBars" :key="index" :className="item.className" :title="item.title"
      :path="item.path" :class="selectIndex == index ? 'select' : 'normal'" @changeIndex="changeIndex(index)">
    </TabBarItem>
  </div>
</template>
<script>
  // 导入TabBarItem模块
  import TabBarItem from "@/components/TabBarItem.vue";
  import { mapMutations } from "vuex";
  export default {
    name: "TabBar",
    data: function () {
      return {
      }
    },
    props: ['tabBars'],
    watch: {
      $route:function(to){
       if (to.meta.deep == 1) {
        this.$store.commit("changeShowTabBar", true);
       }
      }
    },
    computed: {
      //该数据源用来记录默认选中的item
      selectIndex() {
        return this.$store.state.tab.tabIndex;
      },
      showTabBar() {
        return this.$store.state.nav.showTabBar;
      },
    },
    methods: {
      changeIndex(index) {
        //通知Vuex完成导航标题的更改
        this.changeTitle(this.tabBars[index].title)
        this.changeTabIndex(index);
      },
      ...mapMutations(['changeTitle', 'changeTabIndex'])
    },
    components: {
      TabBarItem,
    }
  }
</script>
<style lang="less" scoped>
  .tabBar {
    width: 100%;
    height: 58px;
    /*no */
    background-color: #f4f4f4;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
</style>